import React from 'react';
import { Slider } from 'antd';
import type { SliderProps, SliderRangeProps, SliderSingleProps } from 'antd/es/slider';
import './styles.scss';

type CustomSliderProps = (
  | (SliderSingleProps & { range?: undefined })
  | (SliderRangeProps & { range: true | SliderRangeProps['range'] })
) & {
  size?: 'small' | 'default';
};

const index = ({ size = 'default', ...props }: CustomSliderProps) => {
  const sizeClass = size === 'default' ? '' : `modelSlider--${size}`;

  return (
    <Slider
      {...props}
      className={`modelSlider ${sizeClass}`}
      // railStyle={{
      //   height: size === 'default' ? 10 : 4, // 可选：调整轨道高度
      //   borderRadius: 20,
      // }}
      // trackStyle={{
      //   // background: 'linear-gradient(90deg, #ff0000, #00ff00)', // 渐变色背景
      //   background: ' linear-gradient(90deg, #1B6DFA 0%, #00D0FE 181.25%)',
      //   height: size === 'default' ? 10 : 4, // 可选：调整轨道高度
      //   borderRadius: 20,
      // }}
      // disabled
    />
  );
};

export default index;
